import { View, Text, StatusBar, Image, useWindowDimensions, StyleSheet } from 'react-native'
import React, { useState } from 'react'
import { zhSpacingColLg, zhThemeColor } from '../global'
// 引入图片模块(ES6)，最后才会进行打包
import logo1 from '../assets/img/logo.png'
// 引入图片模块(CJS)
const logo2 = require('../assets/img/logo.png')
// 创建样式对象
const ss = StyleSheet.create({
  logo: {
    marginTop: zhSpacingColLg*8,
    marginLeft: 'auto',
    marginRight: 'auto'
  }
})


export default function Login() {
  /*
  // 状态变量，保存宽度和高度
  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)
  // 异步获取服务器端图片的尺寸
  Image.getSize(
    'https://reactnative.dev/img/tiny_logo.png',
    (w,h) => {
      console.log('宽度：'+w, '高度：'+h)
      // 将宽高属性设置为图片的宽高
      setWidth(w)
      setHeight(h)
    }
  )
  */
  // 获取屏幕宽度
  const imageSize = useWindowDimensions().width * 0.6

  return (
    <View>
      {/* F1: 顶部状态栏 */}
      <StatusBar backgroundColor={zhThemeColor} barStyle="light-content" />
      {/* F2: LOGO图 */}
      {/* 本地图片 */}
      {/* <Image source={logo1} /> */}
      {/* <Image source={logo2} /> */}
      <Image
       source={require('../assets/img/logo.png')}
       style={[
        {width: imageSize,height: imageSize},
        ss.logo
       ]} 
      />
      {/* 网络图片 */}
      {/* <Image style={{width, height}} source={{
        uri: 'https://reactnative.dev/img/tiny_logo.png'
      }} /> */}
      {/* base64 */}

      {/* <Image style={{width: 50, height: 50}} source={{
        uri: ''
      }} /> */}

      {/* F3: 手机号码输入框组 */}
      {/* F4: 密码输入框组 */}
      {/* F5: 登录按钮 */}
      {/* F6: 忘记密码 */}
    </View>
  )
}